<template>
  <div class="mobile-body">
    <Header :logo="jsonData.region_img_201_1" :options="jsonData.region_text_100_1" />
    <div class="main">
      <dept-info class="bg-room" :options="deviceInfo" />
      <div class="doc-outline">
        <doc-profile :options="single" />
        <div class="doc-patients">
          <div class="curr-patient">
            <div class="plug-title">就诊</div>
            <div class="plug-body">
              <template v-if="single['registerIdShow'] == '0'">
                {{ (single['curr'] && single['curr']['patientName']) || '' }}
              </template>
              <template v-else>
                {{ (single['curr'] && single['curr']['registerId']) || '' }}&nbsp;&nbsp;{{ (single['curr'] && single['curr']['patientName']) || '' }}
              </template>
            </div>
          </div>
          <div class="wait-patient">
            <div class="plug-title">候诊</div>
            <div class="plug-body">
              <ul>
                <li v-for="(item, index) in single['wait']" :key="index">
                  <template v-if="single['registerIdShow'] == '0'">
                    {{ item.patientName }}
                  </template>
                  <template v-else> {{ item.registerId }}&nbsp;&nbsp;{{ item.patientName }} </template>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Footer :options="jsonData.region_text_100_1" />
    <msg-win />
  </div>
</template>
<script src="./room.js"></script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/assets/styles/rooms.scss';
:deep(.off-name) {
  &.bg-room {
    height: 708px;
    .dept-name {
      height: 365px;
      line-height: 365px;
      font-size: 160px;
    }
    .room-name {
      height: 254px;
      line-height: 254px;
      background: #fff;
      border-radius: 16px;
      color: #0059b3;
      margin: 0 50px;
    }
  }
}
.main {
  .doc-profile {
    display: none;
  }
  .doc-patients {
    padding-top: 40px;
  }
  .curr-patient {
    height: 330px;
    margin-bottom: 40px;
    .plug-title {
      line-height: 1.5;
    }
    .plug-body {
      line-height: 330px;
      font-size: 124px;
    }
  }
  .wait-patient {
    background: #eae3d0;
    border-radius: 20px;
    overflow: hidden;
    .plug-title {
      height: 460px;
    }
    .plug-body {
      line-height: 230px;
      height: 460px;
    }
  }
}
</style>
